<template>
  <div class="list">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="100px">
        <el-form-item label="维保作业人员">
          <el-input v-model="formInline.maintWorker"></el-input>
        </el-form-item>
        <el-form-item label="设备注册代码">
          <el-input v-model="formInline.eleCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>故障任务数量:<span style="color:red;margin:0 5px">{{pagination.pageTotal}}</span> </p>
        </div>

      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="设备注册代码" width="190">
          <template slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row.failureId)">
              {{scope.row.eleCode}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="eleUseCommunity" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="failureImgurl" label="故障照片">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="click" v-if="scope.row.url"> <!--trigger属性值：hover、click、focus 和 manual-->
              <a :href="fileIP+scope.row.url" target="_blank" title="查看最大化图片">
                <img :src="fileIP+scope.row.url" style="width: 300px;height: 300px">
              </a>
              <img slot="reference" :src="fileIP+scope.row.url" style="width: 50px;height: 50px; cursor:pointer">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="failureRemark" label="故障详情">
        </el-table-column>
        <el-table-column prop="failureStatus" label="处理状态">
        </el-table-column>
        <el-table-column prop="createTime" label="状态时间">
        </el-table-column>
        <el-table-column prop="maintWorker" label="维保作业人员">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <el-dialog title="故障任务详情" :visible.sync="dialogVisible" :before-close="handleClose" width="55%">
      <!-- <div>
        <h1>评价详情</h1>
        <div style="height:100px">
          <p style="display: flex;justify-content: right;"><el-button size="small">导出pdf</el-button></p>
          <div style="padding:0 20px;line-height:25px">该保养工单尚未由使用单位评价!</div>
        </div>
      </div> -->
      <div>
        <h1>基本详情</h1>
        <el-form :model="elefailureBaseInfo" :inline='true'>
          <el-form-item label="设备注册代码" label-width="100px">
            <el-input v-model="elefailureBaseInfo.eleCode" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="故障报修人" label-width="100px">
            <el-input v-model="elefailureBaseInfo.nickName" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="使用单位名称" label-width="100px">
            <el-input v-model="elefailureBaseInfo.useOrgName" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="设备地址" label-width="100px">
            <el-input v-model="elefailureBaseInfo.eleUseCommunity" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <h1>维保任务详情</h1>
        <el-form :model="elefailureDetailInfo" :inline='true'>
          <el-form-item label="故障详情" label-width="100px">
            <el-input v-model="elefailureDetailInfo.failureRemark" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="最近处理时间" label-width="100px">
            <el-input v-model="elefailureDetailInfo.createTime" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="故障状态" label-width="100px">
            <el-input v-model="elefailureDetailInfo.failureStatus" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="维修人员" label-width="100px">
            <el-input v-model="elefailureDetailInfo.maintWorker" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="故障照片" label-width="100px">
            <el-image style="width: 100px; height: 100px" :src="fileIP+elefailureDetailInfo.url" fit="fill" v-if="elefailureDetailInfo.url"></el-image>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getselectElefailurePage, getselectElefailureDetail } from '@/api/work'
export default {
  components: {

  },
  data () {
    return {
      fileIP:this.$util.fileIP,
      value: '',
      options: [],
      formLabelWidth: '120px',
      form: {},
      dialogVisible: false,
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      temData: [],
      tableData: [],
      elefailureBaseInfo: {},
      elefailureDetailInfo: {}
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    // 获取表格数据
    gettableData () {
      getselectElefailurePage({
        maintWorker: this.formInline.maintWorker,
        eleCode: this.formInline.eleCode,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    showDetail (failureId) {
      this.dialogVisible = true
      getselectElefailureDetail({
        failureId: failureId
      }).then(res => {
        if (res.data.code == '200') {
          this.elefailureBaseInfo = res.data.data.elefailureBaseInfo
          this.elefailureDetailInfo = res.data.data.elefailureDetailInfo
        }
      })
    },
    // 关闭弹框
    handleClose () {
      this.form = {}
      this.dialogVisible = false
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    onSubmit () {
      console.log('submit!')
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.list {
  .el-card {
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        width: 190px;
      }
    }
  }
  .el-dialog {
    h1 {
      line-height: 50px;
      background: #f9f9f9;
      font-size: 16px;
      font-weight: 800;
      padding-left: 30px;
    }
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        border: none;
        width: 250px;
      }
      border-bottom: 1px solid #e7eaec;
    }
  }
  .clearfix {
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }

  ::v-deep .el-table .el-table__cell {
    padding: 5px;
  }
}
</style>
